<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; utf-8">
    <title>我的中心</title>
    <%@ include file="../../static/top.jsp"%>
 <link href="/web/res/css/bootstrap-switch/bootstrap-switch.min.css" rel="stylesheet">
</head>
<body class="sticky-header">

<section> <!-- left side start--> <%@ include
        file="../../static/menu.jsp"%> <!-- left side end-->

    <!-- main content start-->
    <div class="main-content">

        <!-- header section start-->


        <%@ include file="../../static/header.jsp"%>


        <!-- header section end-->

        <!-- page heading start-->

        <!-- page heading end-->

        <!--body wrapper start-->
        <div class="wrapper">
        <div class="page-heading">
				<ul class="breadcrumb">
					<li><a href="#">我的采集</a></li>
					<li><a href="/action/my/p/toProject?mid=a1&aid=ch13">我的项目</a></li>
					<li class="active">采集列表</li>
				</ul>
			</div>
            <div class="mail-box">
                <aside class="mail-nav mail-nav-bg-color"> <header
                        class="header">
                    <h4>
                        我的采集列表<span id="tmplsize"
                                    class="label label-danger pull-right inbox-notification"></span>
                    </h4>
                </header>
                    <div class="mail-nav-body">

                        <ul id="mytmplist"
                            class="nav nav-pills nav-stacked mail-navigation">
                        </ul>


                    </div>

                </aside>
                <section class="mail-box-info"> <header class="header">

                    <div class="btn-toolbar">
                        <h4 class="pull-left">&lt;${hname}&gt;采集任务配置</h4>
                    </div>
                </header> <section class="mail-list" style="height:auto">
                    <div class="login-wrap template_setting" mes=""
                         style="padding-top: 20px; padding-left: 0px;">
                        <div class="form-group col-sm-12">
                            <label for="username" class="col-sm-2"
                                   style="font-size: 18px; padding-top: 5px;">模板名称</label>

                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="template_name"
                                       value="">
                            </div>
                        </div>
                        <div class="form-group col-sm-12">
                            <label for="username" class="col-sm-2"
                                   style="font-size: 18px; padding-top: 5px;">采集网址</label>

                            <div class="form-group col-sm-10">
							<textarea class="form-control" rows=2 id="url"
                                      disabled="disabled"></textarea>
                            </div>
                        </div>
                        <div class="form-group col-sm-12">
                            <label for="username" class="col-sm-2"
                                   style="font-size: 18px; padding-top: 5px;">附加属性</label>

                            <div class="form-group col-sm-10">
							
								<input type="text" class="form-control" id="exts"
                                       value="">
                            </div>
                        </div>
                        <div class="form-group col-sm-12" >
                            <label for="username" class="col-sm-2"
                                   style="font-size: 18px; padding-top: 5px;">采集类型</label>

                            <div class="col-sm-10 icheck ">
                                <div class="square">
                                    <div class="radio ">
                                        <input jobindex="url" type="radio" checked
                                               name="job-radio"> <label>单页</label>
                                    </div>
                                </div>
                                <div class="square">
                                    <div class="radio ">
                                        <input jobindex="list" type="radio" name="job-radio">
                                        <label>翻页 </label>
                                    </div>
                                </div>
                               

                            </div>
                        </div>
                        <div id="trule" class="form-group col-sm-12">
                            <label for="username" class="col-sm-2"
                                   style="font-size: 18px; padding-top: 5px;">关联链接</label>

                            <div class="form-group col-sm-10">
                                <textarea class="form-control" rows=8 id="t_urls"></textarea>
                            </div>
                        </div>
                        <div id="prule" class="form-group col-sm-12">
                            <label for="username" class="col-sm-2"
                                   style="font-size: 18px; padding-top: 5px;">配置规则</label>

                            <div class="form-group col-sm-10">
                                <textarea class="form-control" rows=3 id="page_rule"></textarea>
                            </div>
                        </div>
                        <div id="pconf" class="form-group col-sm-12">
                            <label for="username" class="col-sm-2"
                                   style="font-size: 18px; padding-top: 5px;">页码配置</label>

                            <div class="col-sm-8">
                                <label for="username" class="col-sm-2 control-label"
                                       style="padding-top: 5px;">页码配置</label>

                                <div class="form-group col-sm-4">
                                    <select id="minPage" class="form-control">
                                        <option value=1>1</option>
                                        <option value=2>2</option>
                                        <option value=3>3</option>
                                        <option value=4>4</option>
                                        <option value=5>5</option>
                                        <option value=6>6</option>
                                        <option value=7>7</option>
                                        <option value=8>8</option>
                                        <option value=9>9</option>
                                        <option value=10>10</option>
                                        <option value=11>11</option>
                                        <option value=12>12</option>
                                        <option value=13>13</option>
                                        <option value=14>14</option>
                                        <option value=15>15</option>
                                        <option value=16>16</option>
                                        <option value=17>17</option>
                                        <option value=18>18</option>
                                        <option value=19>19</option>
                                        <option value=20>20</option>
                                        <option value=21>21</option>
                                        <option value=22>22</option>
                                        <option value=23>23</option>
                                        <option value=24>24</option>
                                        <option value=25>25</option>
                                        <option value=26>26</option>
                                        <option value=27>27</option>
                                        <option value=28>28</option>
                                        <option value=29>29</option>
                                        <option value=30>30</option>
                                        <option value=31>31</option>
                                        <option value=32>32</option>
                                        <option value=33>33</option>
                                        <option value=34>34</option>
                                        <option value=35>35</option>
                                        <option value=36>36</option>
                                        <option value=37>37</option>
                                        <option value=38>38</option>
                                        <option value=39>39</option>
                                        <option value=40>40</option>
                                        <option value=41>41</option>
                                        <option value=42>42</option>
                                        <option value=43>43</option>
                                        <option value=44>44</option>
                                        <option value=45>45</option>
                                        <option value=46>46</option>
                                        <option value=47>47</option>
                                        <option value=48>48</option>
                                        <option value=49>49</option>
                                        <option value=50>50</option>
                                        <option value=51>51</option>
                                        <option value=52>52</option>
                                        <option value=53>53</option>
                                        <option value=54>54</option>
                                        <option value=55>55</option>
                                        <option value=56>56</option>
                                        <option value=57>57</option>
                                        <option value=58>58</option>
                                        <option value=59>59</option>
                                        <option value=60>60</option>
                                        <option value=61>61</option>
                                        <option value=62>62</option>
                                        <option value=63>63</option>
                                        <option value=64>64</option>
                                        <option value=65>65</option>
                                        <option value=66>66</option>
                                        <option value=67>67</option>
                                        <option value=68>68</option>
                                        <option value=69>69</option>
                                        <option value=70>70</option>
                                        <option value=71>71</option>
                                        <option value=72>72</option>
                                        <option value=73>73</option>
                                        <option value=74>74</option>
                                        <option value=75>75</option>
                                        <option value=76>76</option>
                                        <option value=77>77</option>
                                        <option value=78>78</option>
                                        <option value=79>79</option>
                                        <option value=80>80</option>
                                        <option value=81>81</option>
                                        <option value=82>82</option>
                                        <option value=83>83</option>
                                        <option value=84>84</option>
                                        <option value=85>85</option>
                                        <option value=86>86</option>
                                        <option value=87>87</option>
                                        <option value=88>88</option>
                                        <option value=89>89</option>
                                        <option value=90>90</option>
                                        <option value=91>91</option>
                                        <option value=92>92</option>
                                        <option value=93>93</option>
                                        <option value=94>94</option>
                                        <option value=95>95</option>
                                        <option value=96>96</option>
                                        <option value=97>97</option>
                                        <option value=98>98</option>
                                        <option value=99>99</option>
                                        <option value=100>100</option>
                                    </select>
                                </div>
                                <label for="username" class="col-sm-2 control-label"
                                       style="padding-top: 5px;">最大页码</label>

                                <div class="form-group col-sm-4">
                                    <select id="maxPage" class="form-control">
                                        <option value=1>1</option>
                                        <option value=2>2</option>
                                        <option value=3>3</option>
                                        <option value=4>4</option>
                                        <option value=5>5</option>
                                        <option value=6>6</option>
                                        <option value=7>7</option>
                                        <option value=8>8</option>
                                        <option value=9>9</option>
                                        <option value=10 selected>10</option>
                                        <option value=11>11</option>
                                        <option value=12>12</option>
                                        <option value=13>13</option>
                                        <option value=14>14</option>
                                        <option value=15>15</option>
                                        <option value=16>16</option>
                                        <option value=17>17</option>
                                        <option value=18>18</option>
                                        <option value=19>19</option>
                                        <option value=20>20</option>
                                        <option value=21>21</option>
                                        <option value=22>22</option>
                                        <option value=23>23</option>
                                        <option value=24>24</option>
                                        <option value=25>25</option>
                                        <option value=26>26</option>
                                        <option value=27>27</option>
                                        <option value=28>28</option>
                                        <option value=29>29</option>
                                        <option value=30>30</option>
                                        <option value=31>31</option>
                                        <option value=32>32</option>
                                        <option value=33>33</option>
                                        <option value=34>34</option>
                                        <option value=35>35</option>
                                        <option value=36>36</option>
                                        <option value=37>37</option>
                                        <option value=38>38</option>
                                        <option value=39>39</option>
                                        <option value=40>40</option>
                                        <option value=41>41</option>
                                        <option value=42>42</option>
                                        <option value=43>43</option>
                                        <option value=44>44</option>
                                        <option value=45>45</option>
                                        <option value=46>46</option>
                                        <option value=47>47</option>
                                        <option value=48>48</option>
                                        <option value=49>49</option>
                                        <option value=50>50</option>
                                        <option value=51>51</option>
                                        <option value=52>52</option>
                                        <option value=53>53</option>
                                        <option value=54>54</option>
                                        <option value=55>55</option>
                                        <option value=56>56</option>
                                        <option value=57>57</option>
                                        <option value=58>58</option>
                                        <option value=59>59</option>
                                        <option value=60>60</option>
                                        <option value=61>61</option>
                                        <option value=62>62</option>
                                        <option value=63>63</option>
                                        <option value=64>64</option>
                                        <option value=65>65</option>
                                        <option value=66>66</option>
                                        <option value=67>67</option>
                                        <option value=68>68</option>
                                        <option value=69>69</option>
                                        <option value=70>70</option>
                                        <option value=71>71</option>
                                        <option value=72>72</option>
                                        <option value=73>73</option>
                                        <option value=74>74</option>
                                        <option value=75>75</option>
                                        <option value=76>76</option>
                                        <option value=77>77</option>
                                        <option value=78>78</option>
                                        <option value=79>79</option>
                                        <option value=80>80</option>
                                        <option value=81>81</option>
                                        <option value=82>82</option>
                                        <option value=83>83</option>
                                        <option value=84>84</option>
                                        <option value=85>85</option>
                                        <option value=86>86</option>
                                        <option value=87>87</option>
                                        <option value=88>88</option>
                                        <option value=89>89</option>
                                        <option value=90>90</option>
                                        <option value=91>91</option>
                                        <option value=92>92</option>
                                        <option value=93>93</option>
                                        <option value=94>94</option>
                                        <option value=95>95</option>
                                        <option value=96>96</option>
                                        <option value=97>97</option>
                                        <option value=98>98</option>
                                        <option value=99>99</option>
                                        <option value=100>100</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-2 "></div>

                        </div>
                        <div class="form-group col-sm-12">


                            
                            <div class="compose-btn pull-right">
                                <a class="btn btn-sm btn-primary" href="javascript:void(0)"
                                   id="saveBtn"><i class="fa fa-check-circle-o"></i> 保存配置</a> <a
                                    class="btn btn-sm btn-primary" href="javascript:void(0)"
                                    id="startJobBtn"><i class="fa fa-play"></i> 启动任务</a>

                            </div>

                        </div>


                    </div>
                </section> </section>

            </div>
        </div>
        <!--body wrapper end-->


        <!--footer section start-->
        <%@ include file="../../static/footer.jsp"%>
      
        <script src="/web/res/js/bootstrap-switch/bootstrap-switch.js" ></script>
        <!--footer section end-->


    </div>
    <!-- main content end--> </section>

<script type="text/javascript">
    var tplList = ${tmpList};
    $(document).ready(function() {
    	
    	$('.square input').iCheck({
            checkboxClass : 'icheckbox_square',
            radioClass : 'iradio_square',
            uncheck:true,
            increaseArea : '20%' // optional
        });
    	//.iCheck('check')
    	
        var li = "";
        for (var i = 0; i < tplList.length; i++) {
            li = li + "<li id='li"+ i+ "' onclick='load("+ tplList[i].id+ ")' style='overflow:hidden;white-space:nowrap; text-overflow:ellipsis;'><a href='javascript:void(0)'> <i class='fa fa-cogs'></i>"+ tplList[i].template_name+ "</a></li>";
        }
        if(tplList&&tplList.length>0){
            load(tplList[0].id);
        }else{
        	$("input[jobindex='url']").iCheck('check');
        	$("#trule").show();
        	$("#prule").hide();
        	$("#pconf").hide();
        }
    
        $("#mytmplist").html(li);
        
      
        $("#tmplsize").text(tplList.length);
      
        
        $('input').on('ifChecked', function(event) {

            var index = $(this).attr("jobindex");
            if (index == "url") {
            	$("#trule").show();
            	$("#prule").hide();
            	$("#pconf").hide();
            }else if (index == "list") {
            	$("#trule").hide();
            	$("#prule").show();
            	$("#pconf").show();
            }
        });
       
        
    });
    
   
    function load(id) {
        var list = $("#mytmplist").find("li");
        for (var i = 0; i < list.length; i++) {
            list.eq(i).removeClass("active");
        }
        $("li[onclick='load(" + id + ")']").addClass("active");
        $(".template_setting").attr("mes", id);
        for (var i = 0; i < tplList.length; i++) {
            if (id == tplList[i].id) {
                $("#template_name").val(tplList[i].template_name);
                $("#url").val(tplList[i].url);
                $("#exts").val(tplList[i].exts);
                if(tplList[i].content==null||tplList[i].content==''||tplList[i].content==undefined){
                	 $("#t_urls").html(tplList[i].url);
                }else{
                	 $("#t_urls").html(tplList[i].content);
                }
               
                if(tplList[i].page_rule==null||tplList[i].page_rule==''||tplList[i].page_rule==undefined){
                    $("#page_rule").val(tplList[i].url);
                }else{
                    $("#page_rule").val(tplList[i].page_rule);
                }
                if(tplList[i].type==null||tplList[i].type==''||tplList[i].type==undefined||tplList[i].type=='url'){
                	$("input[jobindex='url']").iCheck('check');
                	$("#trule").show();
                	$("#prule").hide();
                	$("#pconf").hide();
                }else{
                	$("input[jobindex='list']").iCheck('check');
                	$("#trule").hide();
                	$("#prule").show();
                	$("#pconf").show();
                }
            }
            $(".template_setting").html();
        }
    }
    $("#saveBtn").click(function() {
        var tid = $(".template_setting")[0].attributes[1].nodeValue;
        var template_name = $("#template_name").val();
        var page_rule = $("#page_rule").val();

        var minPage = $("#minPage").val();
        var maxPage = $("#maxPage").val();
        var urls = $("#t_urls").val();
        var exts = $("#exts").val();
        var type = $("input[name='job-radio']:checked").attr("jobindex");
		if(tid==null||tid==''||urls==null||urls==''||template_name==null||template_name==''){
			 layer.msg("请添加模板");
			 return;
		}
        var t = {};
        t.id=tid;
        t.min_page=minPage;
        t.max_page=maxPage;
        t.template_name=template_name;
        t.page_rule=page_rule;
        t.type=type;
        t.content=urls;
        t.exts=exts;

        $.post("/action/my/m/saveTemplateConfig", t, function(result) {
            if (result.code == 200) {
                layer.msg("保存成功");
            } else {
                layer.msg(result.msg);
            }
        })
    })
    $("#startJobBtn").click(function() {
        var tid = $(".template_setting")[0].attributes[1].nodeValue;
      
        var template_name = $("#template_name").val();
        var page_rule = $("#page_rule").val();

        var minPage = $("#minPage").val();
        var maxPage = $("#maxPage").val();
        var urls = $("#t_urls").val();
        var type = $("input[name='job-radio']:checked").attr("jobindex");
       

        $.blockUI({ message: '<h1>请稍等...</h1> ', css: { width: '200px', height: '100px' } });
        $.post("/action/my/m/startTmplJob", {
            "tid" : tid
         
        }, function(result) {
        	$.unblockUI();
            if (result.code == 200) {
                layer.msg("操作成功");
                window.location.href="/action/my/m/toTemplateConfig?mid=a1&aid=ch12";  
            } else {
                layer.msg("保存失败");
            }
        })
    });
  
   
</script>

</body>
</html>
